<template>
	<!-- 发表文章页面 -->
	<view class="content">
		<view class="list_ul">
			<view class="list_li">
				<view class="list_li_left">
					标题:
				</view>
				<view class="list_li_right">
				  <input type="text" placeholder="请填写标题" class="_input"/>
				</view>
			</view>
			<view class="list_li">
				<view class="list_li_left">
					简介:
				</view>
				<view class="list_li_right">
				  <input type="text" placeholder="请填写简介" class="_input"/>
				</view>
			</view>
			<view class="list_li">
				<view class="list_li_left">
					文章分类:
				</view>
				<view class="list_li_right">
				   <picker @change="bindPickerChange" :value="index" :range="fangshi" class="pick">
				              <view class="uni-input">{{fangshi[index]}}</view>
				   </picker>
				</view>
				<image src="../../static/rightimg.png" class="se" mode="widthFix"></image>
			</view>
			<view class="list_li">
				<view class="list_li_left" style="text-align: center;">
					请上传主图(1张):
				</view>
				<view class="list_li_right">
					<!-- 图片上传组件 url=服务器上传地址-->
				 <upimg url="https://www.baidu.com"></upimg>
				</view>
			</view>
			<view class="list_li">
				<view class="list_li_left">
					文章详情
				</view>
				<view class="list_li_right">
					  <textarea type="text" placeholder="请填写文章详情" class="_input"></textarea>
				</view>
			</view>
		</view>
	
		  <view class="oi_box">
		    <view class="oi" @tap="submit">
		      提交审核
		    </view>
		  </view>
	</view>
</template>

<script>
    import upimg from '../../component/sunui-upimg.vue';  //上传图片
	export default{
		components:{
		upimg
		},
		data (){
			return{
				 index: 0, 
				 fangshi: ['潮人指南','干货技巧','邀约课程','潮人故事','新人入门','中班进阶','精英集合'],
			}
		},
		methods:{
			bindPickerChange: function(e) {
			         console.log('picker发送选择改变，携带值为', e.target.value)
			         this.index = e.target.value
			     },
				 submit (){  //体较申请
				 uni.showToast({
				 	title:'已提交'
				 })
				 setTimeout(()=>{
				 	uni.switchTab({
				 		url:'../member/member'
				 	})
				 },1500);
				 
				 }
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.oi_box{
	  width:100%;
	  display: flex;
	      justify-content: space-around;
	      align-items: center;
		  position: fixed;
		  bottom:60rpx;
	}
	.oi{
	  display: inline-flex;
	      justify-content: space-around;
	      align-items: center;
	      width: 80%;
	      height: 80rpx;
	      background: -webkit-linear-gradient(left, rgb(236, 207, 180),#ff80c0);
	      border-radius: 100rpx;
	      color: #fff;
	      font-size: 33rpx;
	      font-weight: 700;
	      letter-spacing: 5rpx;
	}
.list_ul{
		background-color: #fff;
	}
	.list_li{
		width:90%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		padding:25rpx 0;
		margin:0 auto;
		border-bottom:2rpx solid #ededed;
	}
	.list_li_left{
		width:22%;
		font-size:28rpx;
		color:#999;
	}
	.list_li_right{
		width:78%;
		display: flex;
		align-items: center;
		font-size:28rpx;
	}
	.pick{
		width:100%;
		font-size:28rpx;
	}
	._input{
		width:100%;
		font-size:28rpx;
	}
	.se{
		width:35rpx;
		position: absolute;
		right:0;
	}
	.ks{
			width:90%;
			margin:5rpx auto;
		  color: #ff80c0;
	}
	.bt{
		width:100%;
		height:100rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background-color: #fff;
		position: fixed;
		bottom:0;
	}
	.bt_sm{
			width:140rpx;
			padding:10rpx 0;
			border-radius:100rpx;
		    border:2rpx solid #666;
		    color: #666;
			text-align: center;
			margin-right:25rpx;
	}
	.bt_sm_o{
		border:2rpx solid #ff80c0;
		color: #ff80c0;
	}
	.kms{
		width:90rpx;
		height:90rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color:#000;
		font-size:50rpx;
		background-color: #e3e3e3;
	}
	
</style>
